﻿@page "/card/horizontal-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SampleDescription>
    <p>This sample demonstrates card rendering with horizontal layout. Based on the horizontal structure, product card is shown with detailed information.</p>
</SampleDescription>
<ActionDescription>
    <p>By default, card elements are stacked one after another vertically. You can customize the card with specific direction by adding e-card-horizontal to align elements horizontally. Using e-card-stacked class, you can split the horizontal layout with a stacked element on left or right of the card.</p>
</ActionDescription>

<div class="col-lg-12 control-section card-control-section">
    <div class="row card-layout">
        <div class="col-lg-6 col-md-6">
            <SfCard Orientation="CardOrientation.Horizontal" ID="Phone">
                <img src="//ej2.syncfusion.com/demos/src/card/images/iphone.png" alt="iPhone X" style="width:50%; height:360px">
                <CardStacked>
                    <CardHeader Title="iPhone X" SubTitle="Marketed by Apple Inc" />
                    <CardContent Content="The iPhone X has a 5.8-inch diagonal OLED color-accurate screen, has two cameras on the rear. One is a 12-megapixel with support for face detection. It is capable of capturing 4K video at 24, 30 or 60 frames per second. It supports Qi-standard wireless charging." />
                    <CardFooter>
                        <CardFooterContent>
                            <SfButton CssClass="e-outline">64GB</SfButton>
                        </CardFooterContent>
                        <CardFooterContent>
                            <SfButton CssClass="e-outline">128GB</SfButton>
                        </CardFooterContent>
                    </CardFooter>
                </CardStacked>
            </SfCard>
        </div>
        <div class="col-lg-6 col-md-6">
            <SfCard Orientation="CardOrientation.Horizontal" ID="Trimmer">
                <CardStacked>
                    <CardHeader Title="Philips Trimmer" />
                    <CardContent Content="Philips trimmers are designed to last longer than 4 ordinary trimmers and DuraPower Technology which optimizes power." />
                </CardStacked>
                <img src="//ej2.syncfusion.com/demos/src/card/images/Trimmer.png">
            </SfCard>
            <SfCard Orientation="CardOrientation.Horizontal" ID="Camera">
                <img src="//ej2.syncfusion.com/demos/src/card/images/Camera.png">
                <CardStacked>
                    <CardHeader Title="Canon 135mm" />
                    <CardContent Content="The fastest 135mm telephoto lens in its class. Two UD-glass elements correct secondary spectrum for outstanding sharpness and color." />
                </CardStacked>
            </SfCard>
        </div>
    </div>
</div>

<style>
    #Phone .e-card-stacked {
        justify-content: flex-start;
    }

    .e-card .e-card-header .e-card-header-caption .e-card-header-title {
        font-size: 14px;
        font-family: Helvetica, 'Segoe UI';
        font-weight: bold;
    }

    #Trimmer {
        height: 175px;
    }

    #Camera .e-card-content {
        padding-top: 0px;
    }

    #Trimmer .e-card-content {
        padding-top: 0px;
    }

    #Camera {
        height: 175px;
    }

    .card-layout {
        max-width: 850px;
        margin: auto;
    }

    .e-card.e-card-horizontal img {
        margin: 0px;
        width: 50%
    }

    .e-card {
        margin: 7px;
    }

    .card-control-section .e-card.e-card-horizontal.e-product .e-card-stacked > :first-child,
    .card-control-section .e-card.e-card-horizontal .e-card-stacked > :first-child,
    .card-control-section .e-card.e-card-horizontal .e-card-stacked > :first-child {
        flex-grow: 0;
    }
</style>
